<template>
  <div
    ref="rightPanel"
    class="rightPanel-container"
    :class="{ 'show-panel': isShow }"
  >
    <div class="rightPanel-background" />
    <div class="rightPanel">
      <div class="rightPanel-items">
        <slot />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "rightPanel",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isShow: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      },
    },
  },
  watch: {
    isShow(val) {
      if (val) {
        this.addEvent();
      }
    },
  },
  mounted() {
    this.insertToBody();
  },
  methods: {
    insertToBody() {
      const el = document.querySelector(".rightPanel-container");
      const body = document.querySelector("body");
      body.insertBefore(el, body.firstChild);
    },
    addEvent() {
      document.querySelector(".rightPanel-background").onclick = () => {
        this.isShow = false;
      };
    },
  },
};
</script>
<style lang="scss">
.rightPanel-container {
  .rightPanel-background {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
    background: rgba(0, 0, 0, 0.2);
    z-index: -1;
  }
  &.show-panel {
    transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
    .rightPanel-background {
      z-index: 20000;
      opacity: 1;
      width: 100%;
      height: 100%;
    }
    .rightPanel {
      transform: translate(0);
    }
  }
  .rightPanel {
    width: 100%;
    max-width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
    transform: translate(100%);
    background: #fff;
    z-index: 40000;
  }
}
</style>
